<template>
  <div class="flex-auto over-hidden">
    <listLayout class="">
      <template #title>用户列表</template>
      <template #form>
        <div>
          <el-button @click="handlCreateUser">新增用户</el-button>
          <!-- <el-button>删除用户</el-button> -->
        </div>

        <el-form
          class=""
          :inline="true"
          @submit.native.prevent="handleFormSubmit"
        >
          <el-form-item>
            <el-input
              v-model="formData.username"
              placeholder="请输入用户名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            ><el-button icon="el-icon-search" native-type="submit"></el-button
          ></el-form-item>
        </el-form>
      </template>

      <template #table>
        <el-table :data="tableData" :loading="tableLoading">
          <el-table-column
            prop="username"
            label="用户名"
            width=""
            align=""
          ></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column
            prop="createdAt"
            label="创建时间"
            width=""
          ></el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm="handleTableRowDelete(scope.row)"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination mt40">
          <el-pagination
            background
            layout="prev, pager, next, sizes, total"
            :total="pagination.total"
            :page-sizes="[10, 20, 30, 40]"
            :current-page="formData.page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </template>
    </listLayout>

    <el-dialog
      title="新增用户"
      width="500px"
      top="5%"
      :visible.sync="dialogVisibleCreateUser"
    >
      <SignUp :isDialog="true" @sign-up-success="handleSignUpSuccess" />
    </el-dialog>
  </div>
</template>

<script>
import listLayout from "@/components/listLayout/listLayout.vue";
import SignUp from "@/views/SignUp/SignUp.vue";
// mixin
import service from "./service";

export default {
  name: "UserTable",

  mixins: [service],

  components: { listLayout, SignUp },

  data() {
    return {
      formData: {
        username: "",
        email: "",
        page: 1,
        size: 10,
      },

      tableData: [],
      tableLoading: false,

      dialogVisibleCreateUser: false,

      pagination: {
        total: 0,
      },
    };
  },

  methods: {
    handlCreateUser() {
      this.dialogVisibleCreateUser = true;
    },

    handleFormSubmit(e) {
      // console.log(e, typeof e);
      if (e && e.type === "submit") {
        this.formData.page = 1;
      }
      this.getUser();
    },

    handleTableRowDelete(row) {
      // console.log(row);
      this.removeUser(row.id);
    },

    handleSizeChange(size) {
      // console.log(size);
      this.formData.size = size;
      this.handleFormSubmit();
    },

    handleCurrentChange(page) {
      // console.log(page);
      this.formData.page = page;
      this.handleFormSubmit();
    },

    handleSignUpSuccess() {
      this.dialogVisibleCreateUser = false
      this.handleFormSubmit();
    }
  },

  mounted() {
    this.handleFormSubmit();
  },
};
</script>

<style lang="less" scoped>
/deep/ .list-filter {
  display: flex;
  justify-content: space-between;
}
</style>
